@import "common.css";
@import "normalize.css";
@import "custom-btn.css";
body {
  background: linear-gradient(45deg, #3a1c71, #d76d77, #ffaf7b);
}
.header {
  height: 66px;
  line-height: 66px;
}
.header .logo {
  display: inline-block;
  width: 138px;
  height: 66px;
  margin-top: 18px;
  background: url(../imgs/logo-white.png) no-repeat;
}
.header .header-login a {
  color: #00bdff;
}
.content {
  height: 553px;
  margin-top: 38px;
}
.content .reg-form {
  width: 420px;
  margin: 0 auto;
}
.content .reg-form h1 {
  font-size: 38px;
  color: #4b4b4b;
  line-height: 58px;
  font-weight: normal;
}
.content .reg-form h2 {
  font-size: 26px;
  color: #4b4b4b;
  line-height: 48px;
  font-weight: normal;
}
.content .reg-form .reg-desc-p {
  line-height: 32px;
  padding-left: 70px;
  border-radius: 3px;
  color: #fff;
  background: url(../imgs/reg-gift.png) no-repeat 42px 6px;
}
.content .reg-form .reg-item {
  position: relative;
}
.content .reg-form .reg-item .reg-input {
  width: 420px;
  height: 39px;
  line-height: 39px;
  font-size: 14px;
  padding-left: 15px;
  border-radius: 3px;
  border: 1px solid #c5c5c5;
  margin-bottom: 24px;
  color: #a3a3a3;
}
.content .reg-form .reg-item .msg-input {
  width: 295px;
}
.content .reg-form .reg-item .custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
}
.content .reg-form .reg-item .btn-12 {
  position: absolute;
  right: 21px;
  top: -21px;
  border: none;
  box-shadow: none;
  width: 130px;
  height: 40px;
  line-height: 42px;
  -webkit-perspective: 230px;
  perspective: 230px;
}
.content .reg-form .reg-item .btn-12:hover span:nth-child(1) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.content .reg-form .reg-item .btn-12:hover span:nth-child(2) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
.content .reg-form .reg-item .btn-12 span {
  background: #00acee;
  background: linear-gradient(0deg, #00acee 0%, #027efb 100%);
  display: block;
  position: absolute;
  width: 130px;
  height: 40px;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  border-radius: 0 5px 5px 0;
  margin: 0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.content .reg-form .reg-item .btn-12 span:nth-child(1) {
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.content .reg-form .reg-item .btn-12 span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.content .reg-form .reg-item .error {
  display: none;
  position: absolute;
  left: 429px;
  top: 12px;
  color: #f15b5b;
  font-size: 12px;
  width: 50%;
  line-height: 20px;
}
.content .reg-form .reg-item .error .error-icon {
  width: 20px;
  height: 20px;
  background: url(../imgs/sprite2.png) no-repeat 0 -128px;
  margin-top: 2px;
}
.content .reg-form .reg-item .clear-img {
  display: none;
  position: absolute;
  right: 9px;
  top: 12px;
  cursor: pointer;
}
.content .reg-form .reg-item .code-img {
  right: 132px;
}
.content .reg-form .reg-item .clear-last-img {
  right: 28px;
}
.content .reg-form .agree {
  margin-bottom: 28px;
}
.content .reg-form .agree .checked {
  vertical-align: middle;
}
.content .reg-form .agree .info {
  font-size: 12px;
  color: #a3a3a3;
}
.content .reg-form .agree .info a {
  color: #00bdff;
}
.content .reg-form .reg-btn {
  width: 100%;
  height: 50px;
  font-size: 16px;
}
.content .reg-form .custom-btn {
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
}
.content .reg-form .btn-6 {
  background: #f796c0;
  background: linear-gradient(to left, #f0f2f0, #000c40);
  line-height: 42px;
  padding: 0;
  border: none;
}
.content .reg-form .btn-6:before,
.content .reg-form .btn-6:after {
  position: absolute;
  content: "";
  height: 0%;
  width: 1px;
  box-shadow: -1px -1px 20px 0px #ffffff, -4px -4px 5px 0px #ffffff, 7px 7px 20px 0px rgba(0, 0, 0, 0.4), 4px 4px 5px 0px rgba(0, 0, 0, 0.3);
}
.content .reg-form .btn-6:before {
  right: 0;
  top: 0;
  transition: all 500ms ease;
}
.content .reg-form .btn-6:after {
  left: 0;
  bottom: 0;
  transition: all 500ms ease;
}
.content .reg-form .btn-6:hover {
  background: transparent;
  color: #76aef1;
  box-shadow: none;
}
.content .reg-form .btn-6:hover:before {
  transition: all 500ms ease;
  height: 100%;
}
.content .reg-form .btn-6:hover:after {
  transition: all 500ms ease;
  height: 100%;
}
.content .reg-form .btn-6 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.content .reg-form .btn-6 span:before,
.content .reg-form .btn-6 span:after {
  position: absolute;
  content: "";
  box-shadow: -1px -1px 20px 0px #ffffff, -4px -4px 5px 0px #ffffff, 7px 7px 20px 0px rgba(0, 0, 0, 0.4), 4px 4px 5px 0px rgba(0, 0, 0, 0.3);
}
.content .reg-form .btn-6 span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: 0.5px;
  transition: all 500ms ease;
}
.content .reg-form .btn-6 span:after {
  right: 0;
  bottom: 0;
  width: 0%;
  height: 0.5px;
  transition: all 500ms ease;
}
.content .reg-form .btn-6 span:hover:before {
  width: 100%;
}
.content .reg-form .btn-6 span:hover:after {
  width: 100%;
}
